<template>
  <div class="demo">
    <div class="demo-title">自定义选项</div>
    <div class="demo-content">
      <AutoComplete
        v-model:value="value"
        style="width: 200px"
        placeholder="input here"
        :options="options"
        @search="handleSearch"
      >
        <template #option="{ value: val }">
          {{ val.split('@')[0] }} @
          <span style="font-weight: bold">{{ val.split('@')[1] }}</span>
        </template>
      </AutoComplete>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import AutoComplete from '@sscd/auto-complete';
  const value = ref('');
  const options = ref<{ value: string }[]>([]);
  const handleSearch = (val: string) => {
    let res: { value: string }[];
    if (!val || val.indexOf('@') >= 0) {
      res = [];
    } else {
      res = ['gmail.com', '163.com', 'qq.com'].map((domain) => ({ value: `${val}@${domain}` }));
    }
    options.value = res;
  };
</script>
